<section class="content-section-column" style="padding: 0 24px 24px 24px; background-color: #f0f2f4">
  <lv-tabs [lvType]="'panel'">
    <lv-tab
      *ngFor="let item of data; let i = index"
      [lvTitle]="tabTitle"
      [lvDropdownLabel]="item.content"
      [lvDisabled]="item?.disabled"
    >
      <span>{{ item.content }}</span>

      <ng-template #tabTitle>
        <div class="tab-header">
          <div>
            <i [lv-icon]="item.icon"></i>
            {{ item.title }}
          </div>
          <div>{{ item.content }}</div>
        </div>
      </ng-template>
    </lv-tab>
  </lv-tabs>
</section>

<br />

<section class="content-section-column" style="padding: 0 24px 24px 24px; background-color: #f0f2f4">
  <lv-tabs #tabs [lvType]="'panel'" [lvTabDropdownContent]="customDropdown">
    <lv-tab
      *ngFor="let item of data; let i = index"
      [lvTitle]="tabTitle"
      [lvDropdownLabel]="item.content"
      [lvDisabled]="item?.disabled"
      [lvId]="item.lvId"
    >
      <span>{{ item.content }}</span>

      <ng-template #tabTitle>
        <div class="tab-header">
          <div>
            <i [lv-icon]="item.icon"></i>
            {{ item.title }}
          </div>
          <div>{{ item.content }}</div>
        </div>
      </ng-template>
    </lv-tab>
  </lv-tabs>
</section>

<ng-template #customDropdown let-key let-val="dropdownMenu">
  <div class="custom-box">
    <div class="custom-item" *ngFor="let item of val" (click)="itemClick(item)">
      <i [lv-icon]="getIcon(item.lvId)"></i>
      {{ item.label }}
    </div>
  </div>
</ng-template>
